<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="刘清政">
  <meta name="keyword" content="hexo-theme">
  
    <link rel="shortcut icon" href="/css/images/logo.png">
  
  <title>
    
      vue/1-Vue介绍 | Justin-刘清政的博客
    
  </title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/css/plugins/gitment.css">

  
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
    
<script src="/js/gitment.js"></script>

  
  

  
<meta name="generator" content="Hexo 4.2.0"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>

  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>Justin-刘清政的博客</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link">主页</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">标签</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">归档</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">关于我</a>
          
        </li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link">主页</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">标签</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">归档</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">关于我</a>
            
          </li>
        
      </ul>
    </div>
  </div>
</header>

    <div id="article-banner">
  <h2>vue/1-Vue介绍</h2>



  <p class="post-date">2020-12-13</p>
    <!-- 不蒜子统计 -->
    <span id="busuanzi_container_page_pv" style='display:none' class="">
        <i class="icon-smile icon"></i> 阅读数：<span id="busuanzi_value_page_pv"></span>次
    </span>
  <div class="arrow-down">
    <a href="javascript:;"></a>
  </div>
</div>
<main class="app-body flex-box">
  <!-- Article START -->
  <article class="post-article">
    <section class="markdown-content"><h1 id="Vue入门"><a href="#Vue入门" class="headerlink" title="Vue入门"></a>Vue入门</h1><h2 id="零：前端目前形势"><a href="#零：前端目前形势" class="headerlink" title="零：前端目前形势"></a>零：前端目前形势</h2><h3 id="前端的发展史"><a href="#前端的发展史" class="headerlink" title="前端的发展史"></a>前端的发展史</h3><p><strong>1</strong>.<code>HTML</code>(5)、<code>CSS</code>(3)、<code>JavaScript</code>(ES5、ES6)：编写一个个的页面 -&gt; 给后端(PHP、Python、Go、Java) -&gt; 后端嵌入模板语法 -&gt; 后端渲染完数据 -&gt; 返回数据给前端 -&gt; 在浏览器中查看</p>
<p><strong>2</strong>.Ajax的出现 -&gt; 后台发送异步请求，<code>Render</code>+<code>Ajax</code>混合</p>
<p><strong>3</strong>.单用Ajax（加载数据，DOM渲染页面）：<code>前后端分离的雏形</code></p>
<p><strong>4</strong>.<a href="https://angular.cn/" target="_blank" rel="noopener">Angular框架</a>的出现（1个JS框架）：出现了“<code>前端工程化</code>”的概念（前端也是1个工程、1个项目）</p>
<p><strong>5</strong>.<a href="https://react.docschina.org/" target="_blank" rel="noopener">React</a>、<a href="https://cn.vuejs.org/" target="_blank" rel="noopener">Vue框架</a>：当下最火的2个前端框架（<code>Vue</code>：国人喜欢用，<code>React</code>：外国人喜欢用）</p>
<p><strong>6</strong>.移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -&gt; <code>大前端</code></p>
<p><strong>7</strong>.一套代码在各个平台运行（<strong>大前端</strong>）：<code>谷歌Flutter（Dart语言：和Java很像）</code>可以运行在IOS、Android、PC端</p>
<p><strong>8</strong>.在Vue框架的基础性上 <a href="https://uniapp.dcloud.io/" target="_blank" rel="noopener">uni-app</a>：<strong>一套编码 编到10个平台</strong></p>
<p><strong>9</strong>.在不久的将来 ，前端框架可能会一统天下</p>
<blockquote>
<p><strong>详细的发展史：</strong></p>
<p><a href="https://zhuanlan.zhihu.com/p/337276087?utm_source=wechat_session&amp;utm_medium=social&amp;utm_oi=41967790587904" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/337276087?utm_source=wechat_session&amp;utm_medium=social&amp;utm_oi=41967790587904</a></p>
</blockquote>
<h2 id="一：Vue介绍-和-基本使用"><a href="#一：Vue介绍-和-基本使用" class="headerlink" title="一：Vue介绍 和 基本使用"></a>一：Vue介绍 和 基本使用</h2><h3 id="1-Vue介绍"><a href="#1-Vue介绍" class="headerlink" title="1.Vue介绍"></a>1.Vue介绍</h3><p><a href="https://cn.vuejs.org/" target="_blank" rel="noopener">Vue</a> (读音 <code>/vjuː/</code>，类似于 <strong>view</strong>) 是一套用于构建用户界面的<strong>渐进式框架</strong></p>
<p>与其它大型框架不同的是，Vue 被设计为可以<code>自底向上逐层应用</code></p>
<p>Vue 的核心库<strong>只关注视图层</strong>，不仅易于上手，还便于与第三方库或既有项目整合</p>
<h4 id="渐进式框架"><a href="#渐进式框架" class="headerlink" title="渐进式框架"></a>渐进式框架</h4><p>可以一点一点地使用它，只用一部分，也可以整个工程都使用它</p>
<h4 id="网站"><a href="#网站" class="headerlink" title="网站"></a>网站</h4><ul>
<li>官网：<a href="https://cn.vuejs.org/" target="_blank" rel="noopener">https://cn.vuejs.org/</a></li>
<li>文档：<a href="https://cn.vuejs.org/v2/guide/" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/</a></li>
</ul>
<h3 id="2-Vue特点"><a href="#2-Vue特点" class="headerlink" title="2.Vue特点"></a>2.Vue特点</h3><h4 id="易用"><a href="#易用" class="headerlink" title="易用"></a>易用</h4><ul>
<li>通过 HTML、CSS、JavaScript构建应用</li>
</ul>
<h4 id="灵活"><a href="#灵活" class="headerlink" title="灵活"></a>灵活</h4><ul>
<li>不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。</li>
</ul>
<h4 id="高效"><a href="#高效" class="headerlink" title="高效"></a>高效</h4><ul>
<li>20kB min+gzip 运行大小</li>
<li>超快虚拟 DOM</li>
<li>最省心的优化</li>
</ul>
<h3 id="3-M-V-VM思想"><a href="#3-M-V-VM思想" class="headerlink" title="3.M-V-VM思想"></a>3.M-V-VM思想</h3><h4 id="①-MVVM介绍"><a href="#①-MVVM介绍" class="headerlink" title="① MVVM介绍"></a>① MVVM介绍</h4><p>MVVM 是<code>Model-View-ViewModel</code> 的缩写，它是一种基于前端开发的架构模式，是一种<strong>事件驱动编程方式</strong></p>
<ul>
<li><code>Model</code> ：vue对象的data属性里面的<strong>数据</strong>，这里的数据要显示到页面中</li>
<li><code>View</code> ：vue中数据要显示的HTML页面，在vue中，也称之为“<strong>视图模板</strong>” （HTML+CSS）</li>
<li><code>ViewModel</code>：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的<strong>中转</strong>，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（<strong>双向数据绑定</strong>：JS中变量变了，HTML中数据也跟着改变）</li>
</ul>
<p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gprqsts5q2j321s09saan.jpg" alt="img"></p>
<h4 id="②-MVVM的特性"><a href="#②-MVVM的特性" class="headerlink" title="② MVVM的特性"></a>② MVVM的特性</h4><ul>
<li><strong>低耦合</strong>：<code>视图</code>（View）可以<code>独立于Model变化和修改</code>，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变</li>
<li><strong>可复用</strong>：可以把一些视图逻辑放在1个ViewModel中，让很多View<code>重用这端视图的逻辑</code>（以此减少代码冗余）</li>
<li><strong>独立开发</strong>：<code>开发</code>人员可以专注于<code>业务逻辑</code>和<code>数据的开发</code>（ViewModel），<code>设计</code>人员可以专注于<code>页面设计</code></li>
<li><strong>可测试</strong>：界面元素是比较难以测试的，而现在的测试可以<code>针对ViewModel</code>来编写</li>
</ul>
<h4 id="③-MVVM的逻辑"><a href="#③-MVVM的逻辑" class="headerlink" title="③ MVVM的逻辑"></a>③ MVVM的逻辑</h4><p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gprqt5s5v2j30u00yr75o.jpg" alt="img"></p>
<h3 id="4-组件化开发、单页面开发"><a href="#4-组件化开发、单页面开发" class="headerlink" title="4.组件化开发、单页面开发"></a>4.组件化开发、单页面开发</h3><h4 id="组件化开发"><a href="#组件化开发" class="headerlink" title="组件化开发"></a>组件化开发</h4><p>类似于DTL中的<code>include</code>，<strong>每一个组件</strong>的内容都可以被<strong>替换</strong>和<strong>复用</strong></p>
<p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gprqthy0spj31fx0u0wf8.jpg" alt="img"></p>
<h4 id="单页面开发"><a href="#单页面开发" class="headerlink" title="单页面开发"></a>单页面开发</h4><p>只需要1个页面，结合组件化开发来替换页面中的内容</p>
<p>页面的切换只是组件的替换，页面还是只有1个<code>index.html</code></p>
<h3 id="5-版本"><a href="#5-版本" class="headerlink" title="5.版本"></a>5.版本</h3><p>1.X：使用得较少</p>
<p>2.X：<strong>普遍使用</strong></p>
<p>3.X：刚出没多久，只有Beta版</p>
<h3 id="6-引入方式"><a href="#6-引入方式" class="headerlink" title="6.引入方式"></a>6.引入方式</h3><h4 id="①-CDN的方式引入"><a href="#①-CDN的方式引入" class="headerlink" title="① CDN的方式引入"></a>① CDN的方式引入</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="②-下载后导入"><a href="#②-下载后导入" class="headerlink" title="② 下载后导入"></a>② 下载后导入</h4><p>其实就是直接在浏览器中打开<a href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去" target="_blank" rel="noopener">https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去</a></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="7-补充"><a href="#7-补充" class="headerlink" title="7.补充"></a>7.补充</h3><h4 id="解释型的语言是需要解释器的"><a href="#解释型的语言是需要解释器的" class="headerlink" title="解释型的语言是需要解释器的"></a>解释型的语言是需要解释器的</h4><p>js就是一门解释型语言，只不过js解释器被集成到了浏览器中</p>
<p>所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样</p>
<h4 id="nodejs：一门后端语言"><a href="#nodejs：一门后端语言" class="headerlink" title="nodejs：一门后端语言"></a>nodejs：一门后端语言</h4><p>把chrome的v8引擎（解释器），安装到操作系统之上</p>
<h3 id="8-简单使用"><a href="#8-简单使用" class="headerlink" title="8.简单使用"></a>8.简单使用</h3><h4 id="index-html"><a href="#index-html" class="headerlink" title="index.html"></a>index.html</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue的简单使用<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"box"</span>&gt;</span></span><br><span class="line">    &#123;&#123;name&#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">        el: <span class="string">'#box'</span>, <span class="comment">// 在box这个div中可以写 vue的语法</span></span></span><br><span class="line">        data: &#123;</span><br><span class="line"><span class="actionscript">            name: <span class="string">'Hello World'</span></span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="双向数据绑定测试"><a href="#双向数据绑定测试" class="headerlink" title="双向数据绑定测试"></a>双向数据绑定测试</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">vm._data.name=<span class="string">'darker'</span>    <span class="comment">// 修改js中变量的值</span></span><br><span class="line"></span><br><span class="line">$(<span class="string">'#box'</span>).text(<span class="string">'hahah'</span>)    <span class="comment">// 修改HTML的div中的值</span></span><br></pre></td></tr></table></figure>

<p><img src="https://tva1.sinaimg.cn/large/008i3skNgy1gprqtvb0w1g314o0n6wg6.gif" alt="img"></p>
</section>
    <!-- Tags START -->
    
    <!-- Tags END -->
    <!-- NAV START -->
    
  <div class="nav-container">
    <!-- reverse left and right to put prev and next in a more logic postition -->
    
      <a class="nav-left" href="/python/vue/4-Vue%E7%BB%84%E4%BB%B6/">
        <span class="nav-arrow">← </span>
        
          python/vue/4-Vue组件
        
      </a>
    
    
      <a class="nav-right" href="/vue/4-Vue%E7%BB%84%E4%BB%B6/">
        
          vue/4-Vue组件
        
        <span class="nav-arrow"> →</span>
      </a>
    
  </div>

    <!-- NAV END -->
    <!-- 打赏 START -->
    
      <div class="money-like">
        <div class="reward-btn">
          赏
          <span class="money-code">
            <span class="alipay-code">
              <div class="code-image"></div>
              <b>使用支付宝打赏</b>
            </span>
            <span class="wechat-code">
              <div class="code-image"></div>
              <b>使用微信打赏</b>
            </span>
          </span>
        </div>
        <p class="notice">点击上方按钮,请我喝杯咖啡！</p>
      </div>
    
    <!-- 打赏 END -->
    <!-- 二维码 START -->
    
      <div class="qrcode">
        <canvas id="share-qrcode"></canvas>
        <p class="notice">扫描二维码，分享此文章</p>
      </div>
    
    <!-- 二维码 END -->
    
      <!-- Gitment START -->
      <div id="comments"></div>
      <!-- Gitment END -->
    
  </article>
  <!-- Article END -->
  <!-- Catalog START -->
  
    <aside class="catalog-container">
  <div class="toc-main">
  <!-- 不蒜子统计 -->
    <strong class="toc-title">目录</strong>
    
      <ol class="toc-nav"><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#Vue入门"><span class="toc-nav-text">Vue入门</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#零：前端目前形势"><span class="toc-nav-text">零：前端目前形势</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#前端的发展史"><span class="toc-nav-text">前端的发展史</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#一：Vue介绍-和-基本使用"><span class="toc-nav-text">一：Vue介绍 和 基本使用</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#1-Vue介绍"><span class="toc-nav-text">1.Vue介绍</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#渐进式框架"><span class="toc-nav-text">渐进式框架</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#网站"><span class="toc-nav-text">网站</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-Vue特点"><span class="toc-nav-text">2.Vue特点</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#易用"><span class="toc-nav-text">易用</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#灵活"><span class="toc-nav-text">灵活</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#高效"><span class="toc-nav-text">高效</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#3-M-V-VM思想"><span class="toc-nav-text">3.M-V-VM思想</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#①-MVVM介绍"><span class="toc-nav-text">① MVVM介绍</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#②-MVVM的特性"><span class="toc-nav-text">② MVVM的特性</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#③-MVVM的逻辑"><span class="toc-nav-text">③ MVVM的逻辑</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#4-组件化开发、单页面开发"><span class="toc-nav-text">4.组件化开发、单页面开发</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#组件化开发"><span class="toc-nav-text">组件化开发</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#单页面开发"><span class="toc-nav-text">单页面开发</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#5-版本"><span class="toc-nav-text">5.版本</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#6-引入方式"><span class="toc-nav-text">6.引入方式</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#①-CDN的方式引入"><span class="toc-nav-text">① CDN的方式引入</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#②-下载后导入"><span class="toc-nav-text">② 下载后导入</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-补充"><span class="toc-nav-text">7.补充</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#解释型的语言是需要解释器的"><span class="toc-nav-text">解释型的语言是需要解释器的</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#nodejs：一门后端语言"><span class="toc-nav-text">nodejs：一门后端语言</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#8-简单使用"><span class="toc-nav-text">8.简单使用</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#index-html"><span class="toc-nav-text">index.html</span></a></li><li class="toc-nav-item toc-nav-level-4"><a class="toc-nav-link" href="#双向数据绑定测试"><span class="toc-nav-text">双向数据绑定测试</span></a></li></ol></li></ol></li></ol></li></ol>
    
  </div>
</aside>
  
  <!-- Catalog END -->
</main>

<script>
  (function () {
    var url = 'http://www.liuqingzheng.top/vue/1-Vue介绍/';
    var banner = ''
    if (banner !== '' && banner !== 'undefined' && banner !== 'null') {
      $('#article-banner').css({
        'background-image': 'url(' + banner + ')'
      })
    } else {
      $('#article-banner').geopattern(url)
    }
    $('.header').removeClass('fixed-header')

    // error image
    $(".markdown-content img").on('error', function() {
      $(this).attr('src', 'http://file.muyutech.com/error-img.png')
      $(this).css({
        'cursor': 'default'
      })
    })

    // zoom image
    $(".markdown-content img").on('click', function() {
      var src = $(this).attr('src')
      if (src !== 'http://file.muyutech.com/error-img.png') {
        var imageW = $(this).width()
        var imageH = $(this).height()

        var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
        zoom = zoom < 1 ? 1 : zoom
        zoom = zoom > 2 ? 2 : zoom
        var transY = (($(window).height() - imageH) / 2).toFixed(2)

        $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
        $('.image-view-wrap').addClass('wrap-active')
        $('.image-view-wrap img').css({
          'width': `${imageW}`,
          'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
        })
        $('html').css('overflow', 'hidden')

        $('.image-view-wrap').on('click', function() {
          $(this).remove()
          $('html').attr('style', '')
        })
      }
    })
  })();
</script>


  <script>
    var qr = new QRious({
      element: document.getElementById('share-qrcode'),
      value: document.location.href
    });
  </script>



  <script>
    var gitmentConfig = "liuqingzheng";
    if (gitmentConfig !== 'undefined') {
      var gitment = new Gitment({
        id: "vue/1-Vue介绍",
        owner: "liuqingzheng",
        repo: "FuckBlog",
        oauth: {
          client_id: "32a4076431cf39d0ecea",
          client_secret: "94484bd79b3346a949acb2fda3c8a76ce16990c6"
        },
        theme: {
          render(state, instance) {
            const container = document.createElement('div')
            container.lang = "en-US"
            container.className = 'gitment-container gitment-root-container'
            container.appendChild(instance.renderHeader(state, instance))
            container.appendChild(instance.renderEditor(state, instance))
            container.appendChild(instance.renderComments(state, instance))
            container.appendChild(instance.renderFooter(state, instance))
            return container;
          }
        }
      })
      gitment.render(document.getElementById('comments'))
    }
  </script>




    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
<!-- 不蒜子统计 -->
<span id="busuanzi_container_site_pv">
     本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv" style='display:none'>
     本站访客数<span id="busuanzi_value_site_uv"></span>人
</span>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



  <p class="copyright">
    &copy; 2021 | Proudly powered by <a href="https://www.cnblogs.com/xiaoyuanqujing" target="_blank">小猿取经</a>
    <br>
    Theme by <a href="https://www.cnblogs.com/xiaoyuanqujing" target="_blank" rel="noopener">小猿取经</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>





<!-- Baidu Tongji -->

<script>
    var _baId = 'c5fd96eee1193585be191f318c3fa725';
    // Originial
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?" + _baId;
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
</script>


<script src="/js/script.js"></script>


<script src="/js/search.js"></script>


<script src="/js/load.js"></script>



  <span class="local-search local-search-google local-search-plugin" style="right: 50px;top: 70px;;position:absolute;z-index:2;">
      <input type="search" placeholder="站内搜索" id="local-search-input" class="local-search-input-cls" style="">
      <div id="local-search-result" class="local-search-result-cls"></div>
  </span>


  </body>
</html>